<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
        }
        #box>div{
            width: 33%;
            height: 33%;
            border: 1px solid #000;
            float: left;
            line-height: 200px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        #start{
            cursor: pointer;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div id="box">
        <div class="option">30元话费券</div>
        <div class="option">5元红包</div>
        <div class="option">苹果电脑</div>
        <div class="option">再来一次</div>
        <div id="start">开始抽奖</div>
        <div class="option">腾讯视频会员</div>
        <div class="option">100元红包</div>
        <div class="option">10元话费券</div>
        <div class="option">华为手机</div>
    </div>
</body>
</html>
<script>
    // 思路：1、点击开始抽奖，触发一个定时器；
    //2、在定时器内部随机一个数，通过这个数来获取 奖品所在的元素；
    //3、设置一个时间点，停止定时器；

    //首先要获取到点击开始这个元素
    let but = document.getElementById('start')
    let options = document.getElementsByClassName('option')
   let timer = null
    //1、点击开始，触发定时器
    but.onclick = function(){
        let num = 0 //设置一个初始值作为时间判断
        if(timer == null){
           timer = setInterval(()=>{
            num++;
             //2、随机0~7之间的数，通过数组下标获取选中的元素
             let res = Math.round(Math.random()*(7-0)+0);
            //  console.log(res)
            
            //在给选中的元素添加样式之前，需要把所有的元素都恢复原来的样式
            for(let i = 0;i<options.length;i++){
                options[i].style.backgroundColor = '#fff'
            }
            //给选中的元素添加样式(背景颜色)
            options[res].style.backgroundColor = 'orange'
            // console.log(num);
            //3、给定时器设置一个时间，停止定时器；
            if(num>=50){
                clearInterval(timer);
                timer = null
            }
            
        },100)
        }
      
    }                                             
</script>